<template>
	<u-popup v-model="show" mode="center" :closeable="true" width="590" border-radius="32" @close="$emit('update:visible', false)">
		<view class="popup-title">验证码登录</view>
		<view class="login-form-popup">
			<view class="login-form-item">
				<u-input class="flex-1" v-model="form.phone" placeholder="请输入手机号码" type="number" maxlength="11" :custom-style="{fontWeight:'bold',letterSpacing: '4rpx'}" placeholder-style="font-weight:initial;letter-spacing: 0;"></u-input>
			</view>
			<view class="login-form-item">
				<u-input class="flex-1" v-model="form.code" placeholder="请输入短信验证码" type="number" maxlength="6" :custom-style="{fontWeight:'bold',letterSpacing: '4rpx'}" placeholder-style="font-weight:initial;letter-spacing: 0;"></u-input>
				<view class="get-code" :class="{disabled:codeText!='获取验证码' && codeText!='重新获取'}" @click="getCode()">{{codeText}}</view>
			</view>
			<view class="agreement-box" @click="agreement=!agreement">
				<static-image v-if="agreement" src="/static/img/common/checkbox-active.png" width="32" height="32"></static-image>
				<static-image v-else src="/static/img/common/checkbox-no.png" width="32" height="32"></static-image>
				<view class="mar-l-5">
					<text>我已阅读并同意</text>
					<text class="color-blue" @click.stop="$common.navigator('/pagesA/setting/userAgreement')">《用户服务协议》</text>
				</view>
			</view>
			<view class="mar-t-20">
				<u-button :disabled="!agreement || !form.phone || !form.code" type="primary" shape="circle" @click="submitForm()" :custom-style="{background:'#3385FF',height:'90rpx',fontSize:'32rpx',fontWeight:'bold',letterSpacing: '8rpx'}">立即登录</u-button>
			</view>
		</view>
		<u-verification-code :seconds="60" ref="uCode" @change="codeChange" change-text="x秒" unique-key="login"></u-verification-code>
	</u-popup>
</template>

<script>
	export default {
		name:'SelectOrder',
		props: {
			visible: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				show:false,
				agreement: false,
				form:{
					phone: '',
					code: ''
				},
				codeText:'获取验证码'
			}
		},
		watch:{
			visible(){
				this.show = this.visible
			}
		},
		created() {
			
		},
		methods: {
			submitForm(){
				uni.showLoading({ mask:true })
				this.form.pidUserId = uni.getStorageSync('pidUserId') || ''
				this.form.productId = uni.getStorageSync('productId') || ''
				this.$request({
					url: '/loginUserInfo/login',
					method: 'post',
					data: this.form
				}).then(res => {
					this.open = false
					this.$refs.uCode.reset();
					uni.setStorageSync('token',res.data.token)
					this.$store.commit('SET_USERINFO',res.data)
					uni.removeStorageSync('pidUserId')
					uni.removeStorageSync('productId')
					this.$emit('update:visible', false)
					this.$emit('success')
				})
			},
			getCode(){
				if(this.$refs.uCode.canGetCode) {
					if (!this.form.phone) {
						return this.$u.toast('请输入手机号');
					}
					uni.showLoading({ mask:true })
					this.$request({
						url: '/loginUserInfo/sendSmscode',
						method: 'get',
						data:{
							phone: this.form.phone,
						}
					}).then(res => {
						this.$refs.uCode.start();
					})
				}
			},
			codeChange(text){
				this.codeText = text;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.agreement-box{
		display: flex;
		margin-top: 32rpx;
	}
	.login-form-popup{
		padding: 24rpx 24rpx 48rpx;
		.login-form-item{
			height: 96rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			border: 1rpx solid #F5F7FA;
			display: flex;
			align-items: center;
			padding: 0 24rpx;
			margin-bottom: 32rpx;
			.get-code{
				font-size: 30rpx;
				color: #3385FF;
				margin-left: 24rpx;
				&.disabled{
					color: #aaa;
				}
			}
		}
	}
</style>
